<template>
	<view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="编辑内容" :value="popValue" placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<u-toast ref="uToast"></u-toast>
		<uni-popup ref="inputDialog1" type="dialog">
			<view class="dialogView">
				<uni-fav :checked="checkValue" :star="false" :content-text="contentText" @click="favClick" />
				<!-- <u-switch v-model="sortValue" @change="changesort"></u-switch> -->
				<u--form :model="addForm" ref="uForm">
					<u-form-item label="名字" prop="userName">
						<u-input v-model="addForm.userName" />
					</u-form-item>
					<u-form-item label="电话" prop="phone">
						<u-input v-model="addForm.phone" />
					</u-form-item>
					<u-form-item label="位置" prop="phone">
						<uni-data-picker
							ref="pickTxt"
							placeholder="请选择区域"
							popup-title="请选择所在位置"
							:localdata="dataTree"
							v-model="classes"
							@change="onchange"
							@popupclosed="closePopuo"
							:map="{ text: 'label', value: 'value' }"
						></uni-data-picker>
					</u-form-item>
				</u--form>
				<u-button @click="submit">提交</u-button>
			</view>

			<!-- <uni-popup-dialog ref="inputClose1" mode="input" title="输入内容" :value="addPopV" placeholder="请输入内容" @confirm="dialogInputConfirm1"></uni-popup-dialog> -->
		</uni-popup>
		<!-- <uni-section title="常用语" type="line"></uni-section> -->
		<view class="">
			<uni-swipe-action ref="swipeAction">
				<uni-swipe-action-item
					v-for="(item, index) in swipeList"
					:key="item.id"
					:right-options="options1"
					@change="swipeChange($event, index)"
					@click="swipeClick($event, item)"
				>
					<view class="content-box">
						<!-- <uni-tag v-show="item.sort == 1" :inverted="true" text="标签" type="primary" /> -->
						<u-tag class="tagU" v-if="index == 0" text="默认" plain></u-tag>
						<view class="content-leftTop">
							<text class="content-text">{{ item.userName }}</text>
							<text style="width: 200rpx" class="content-text">{{ item.phone }}</text>
						</view>

						<text class="content-text">{{ item.content }}</text>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view style="height: 180rpx"></view>
		<view class="bottomBtn">
			<button @click="inputDialogToggle1" class="btn-addtxt">添加内容</button>
		</view>
	</view>
</template>

<script>
import { addAddress, getDeptCascade, getAddressList, delAddressList, editorAddress } from '@/api/system/user.js';
import store from '@/store/index.js';
export default {
	components: {},
	data() {
		return {
			show: false,
			isOpened: 'none',
			Alcontent: '',
			UserId: '',
			DeptId: '',
			popValue: '',
			addPopV: '222',
			dataTree: '',
			classes: '',
			sortValue: '',
			ContentTxt: true,
			contentText: {
				contentDefault: '设为默认',
				contentFav: '已默认'
			},
			checkValue: false,
			addForm: {
				phone: '',
				sort: 0,
				text: '',
				userId: 0,
				userName: '',
				zoneId: 0
			},
			editorForm: {
				id: 0,
				phone: '',
				sort: 0,
				text: '',
				userId: 0,
				userName: '',
				zoneId: 0
			},
			options1: [
				{
					text: '默认',
					style: {
						backgroundColor: '#ffff00'
					}
				},
				{
					text: '编辑',
					style: {
						backgroundColor: '#007aff'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: 'rgb(255,58,49)'
					}
				}
			],
			options2: [
				{
					text: '编辑',
					style: {
						backgroundColor: '#007aff'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: 'rgb(255,58,49)'
					}
				}
			],
			swipeList: ''
		};
	},
	onReady() {
		try {
			this.UserId = uni.getStorageSync('userID');
			this.DeptId = uni.getStorageSync('DeptId');
			if (this.UserId) {
				console.log(this.UserId);
			}
		} catch (e) {
			// error
		}
	},
	// 监听页面卸载
	onUnload() {
		store.state.reflash = true;
		console.log('监听页面卸载');
	},
	onLoad(options) {
		if (options.zoneId) {
			this.$nextTick(() => {
				this.ContentTxt = true;
				this.addForm.phone = '';
				this.addForm.sort = 0;
				this.addForm.text = '';
				this.addForm.userName = '';
				this.classes = options.zoneId;

				// console.log();

				this.$refs.inputDialog1.open();
				setTimeout(() => {
					// console.log(this.$refs.pickTxt);
					const domTxt = this.$refs.pickTxt;
					let addressTxt = '';
					domTxt.inputSelected.map((item) => {
						addressTxt += item.text;
					});
					this.addForm.text = addressTxt;
				}, 200);
			});
		}
		this.$nextTick(() => {
			this.getComMange();
		});
	},
	watch: {
		addPopV(newV, oldV) {
			console.log('newV', newV);
			console.log('oldV', oldV);
		}
	},
	methods: {
		//获取常用地址
		async getComMange() {
			await getAddressList(this.UserId).then((res) => {
				// console.log('201', res);
				this.swipeList = res.data.map((item) => {
					return {
						...item,
						content: item.text
					};
				});
			});
			getDeptCascade(this.DeptId).then((res) => {
				this.dataTree = res.data;
			});
		},
		addComMange() {
			this.addForm.userId = this.UserId;
			this.addForm.zoneId = this.classes;
			this.checkValue ? (this.addForm.sort = 1) : (this.addForm.sort = 0);
			console.log('addForm', this.addForm);
			addAddress(this.addForm).then((res) => {
				if (res.code == 201) {
					this.$refs.uToast.show({
						type: 'error',
						message: '常用地址限制十条，请删除或编辑后再试！'
					});
				}
				// console.log(res);
				this.getComMange();
			});
		},
		favClick() {
			// this.$refs.uForm.resetFields();
			this.checkValue = !this.checkValue;
			this.$forceUpdate();
			// console.log('change', e);
		},
		submit() {
			this.ContentTxt ? this.addComMange() : this.editorComMange();

			this.$refs.inputDialog1.close();
		},
		closePopuo(e) {
			console.log('eeee', e);
		},
		onchange(e) {
			let addressTxt = '';
			e.detail.value.map((item) => {
				addressTxt += item.text;
			});
			this.addForm.text = addressTxt;
			console.log(addressTxt);
		},
		//编辑常用语内容
		editorComMange() {
			this.addForm.zoneId = this.classes;
			this.checkValue ? (this.addForm.sort = 1) : (this.addForm.sort = 0);
			editorAddress(this.addForm).then((res) => {
				this.getComMange();
				// console.log(res);
			});
		},
		contentClick() {
			console.log('点击内容');
			uni.showToast({
				title: '点击内容',
				icon: 'none'
			});
		},
		//编辑的弹窗同意
		async dialogInputConfirm(val) {
			// uni.showLoading({
			// 	title: '3秒后会关闭'
			// });

			// uni.hideLoading();
			console.log(val);
			this.Alcontent = val;
			// 关闭窗口后，恢复默认内容
			this.$refs.inputDialog.close();

			await this.editorComMange();
			this.getComMange();
		},
		// async dialogInputConfirm1(val) {
		// 	// uni.showLoading({
		// 	// 	title: '3秒后会关闭'
		// 	// });

		// 	// uni.hideLoading();
		// 	this.addPopV = '';
		// 	console.log(val);
		// 	this.Alcontent = val;
		// 	// 关闭窗口后，恢复默认内容
		// 	this.$refs.inputDialog1.close();

		// 	await this.addComMange();
		// 	this.getComMange();
		// 	this.addPopV = 'fewf';
		// 	// this.Alcontent = '';
		// },
		inputDialogToggle1() {
			this.ContentTxt = true;
			this.addForm.phone = '';
			this.addForm.sort = 0;
			this.addForm.text = '';
			this.addForm.userName = '';
			this.classes = '';
			this.$refs.inputDialog1.open();
			// this.addPopV = '';
		},
		swipeChange(e, index) {
			console.log('返回：', e);
			console.log('当前索引：', index);
		},
		swipeClick(e, item) {
			let { content } = e;
			if (content.text === '删除') {
				uni.showModal({
					title: '提示',
					content: '是否删除',
					success: (res) => {
						// console.log(res);
						if (res.confirm) {
							delAddressList(item.id).then((res) => {
								this.getComMange();
							});
							// console.log(item);
							// this.swipeList.splice(index, 1);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			} else if (content.text === '编辑') {
				this.ContentTxt = false;
				item.sort == 1 ? (this.checkValue = true) : (this.checkValue = false);
				this.addForm = {
					...item
				};
				this.classes = JSON.stringify(item.zoneId);
				console.log('addForm', this.addForm);
				this.$refs.inputDialog1.open();
			} else if (content.text === '默认') {
				uni.showModal({
					title: '提示',
					content: '是否设为默认',
					success: (res) => {
						let data = {
							id: item.id,
							sort: 1,
							userId: this.UserId
						};
						editorAddress(data).then((res) => {
							// this.$tab.navigateTo('/pages/mine/address/index');
							//uni.New
							// this.$nextTick(() => {
							this.getComMange();
							// });
							// console.log(res);
						});
					}
				});
			} else {
				uni.showToast({
					title: `点击了${e.content.text}按钮`,
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style lang="scss">
.content-box {
	flex: 1;
	/* #ifdef APP-NVUE */
	justify-content: center;
	/* #endif */
	// height: 88px;
	// line-height: 44px;
	padding: 15px 15px;
	position: relative;
	background-color: #fff;
	border-bottom-color: #f5f5f5;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
.dialogView {
	background-color: #fff;
	padding: 60rpx;
	border-radius: 20px;
}
.content-leftTop {
	width: 350rpx;
	display: flex;
	justify-content: space-between;
}
.content-text {
	font-size: 15px;
}

.example-body {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	padding: 10px 0;
	background-color: #fff;
}
.bottomBtn {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 180rpx;
	background: #fff;
}
.btn-addtxt {
	margin-top: 20rpx;
	width: 50%;
	background: #fe8124;
	border: none;
	border-radius: 20px;
	color: #fff;
}
.u-tag {
	position: absolute;
	right: 50rpx;
}
// position: fixed;
//     bottom: 6%;
//     left: 50%;
//     transform: translateX(-50%);
</style>
